<template>
    <!-- pages/shopdetails/index.wxml -->
    <view class="page">
        <!-- <view class="header">
    <view class="location" bindtap="showmolde">
      <van-icon name="location-o" size="14px" />
      <text>深圳市</text>
    </view>
    <view class="search">
      <van-icon name="search" size="18" class="seaicon" />
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" placeholder="搜索美发师、门店、服务名称" />
      </view>
    </view>
    <view class="wxcode" bindtap="getQRCode">
      <van-icon name="scan" size="24px" />
    </view>
  </view> -->
        <view class="page-section page-section-spacing swiper">
            <swiper
                @change="swiperChange"
                class="swiper"
                :indicator-dots="indicatorDots"
                :autoplay="autoplay"
                :interval="interval"
                :duration="duration"
                indicator-active-color="#FF8722"
                :circular="true"
            >
                <block v-for="(item, index) in shopltlist.storePhotos" :key="index">
                    <swiper-item>
                        <image class="swiperimg" mode="aspectFill" :src="item" :data-item="item" @tap.stop.prevent="previewstoreImg"></image>
                    </swiper-item>
                </block>
            </swiper>
        </view>
        <view class="shopdetails m-40">
            <view class="shoptitle flexbox">
                <view class="flexbox centers">
                    <view class="shoptitletext1">{{ shoplist.storeName }}</view>
                    <view class="shoptitletext2">总接单{{ shopltlist.servers }}</view>
                </view>
                <view class="shoptitletext3">
                    <!-- <image class="shopicon mr-10" src="{{shopltlist.grade < 5 ? imgUrl + 'clip1.png' : imgUrl + 'clip2.png'}}"></image>{{shopltlist.grade}} -->
                    <image class="shopicon mr-10" :src="shopltlist.grade < 5 ? imgUrl + 'clip1.png' : imgUrl + 'clip2.png'"></image>
                    {{ shopltlist.grade }}
                </view>
            </view>
            <view class="bussiness flexbox">
                <view class="text1 centers">
                    <image class="shopicon mr-10" :src="imgUrl + 'shopbusiness.png'"></image>
                    营业时间：
                </view>
                <view class="text2">{{ shoplist.storeSetting.starttime }}-{{ shoplist.storeSetting.endtime }}</view>
            </view>
            <view class="bussiness flexbox">
                <view class="text1 centers">
                    <image class="shopicon2 mr-10 ml-4" :src="shopimgUrl + 'sit3x.png'"></image>
                    卡位：
                </view>
                <view class="text2">{{ shoplist.storeSetting.station }}</view>
            </view>
            <view class="server flexbox">
                <view class="text1 centers">
                    <image class="shopicon mr-10" :src="imgUrl + 'shopserver.png'"></image>
                    服务项目：
                </view>
                <view class="text3">{{ serverlist }}</view>
            </view>
            <view class="locationbox flexbox">
                <view class="text1 centers">
                    <image class="shopicon mr-10" :src="imgUrl + 'shoplocation.png'"></image>
                    详细地址：
                </view>
                <view class="text3">{{ shopltlist.location }}</view>
                <!-- <view class="text4" wx:if="{{shopltlist.distance < 1000}}">{{shopltlist.distance}}m</view>
      <view class="text4" wx:if="{{shopltlist.distance >= 1000}}">{{shopltlist.newdistance}}km</view> -->
            </view>
            <view class="iconfelx pd-100">
                <view class="iconfelx" :data-telPhone="shoplist.telPhone" @tap="onMobile">
                    <image class="shopicon1 mr-10" :src="imgUrl + 'shopphone.png'"></image>
                    <text>电话</text>
                </view>
                <!-- <view class="iconfelx" bindtap="hit">
        <image class="shopicon1 mr-10" src="{{imgUrl + 'shopconsult.png'}}">
        </image>
        <text>咨询</text>
      </view> -->
                <view class="iconfelx" :data-storeid="shoplist.storeId">
                    <image class="shopicon1 mr-10" :src="imgUrl + 'shoplove.png'"></image>
                    {{ shopltlist.collectionNumber }}
                </view>
            </view>
            <view class="shopmanager-btn-wrap">
                <view class="shopmanager-edit-btn" @tap="edit">
                    <image class="shopicon mr-10" :src="shopimgUrl + 'pen3x.png'" />
                    <text>编辑</text>
                </view>
            </view>
        </view>
        <view class="box">
            <van-tabs :active="active" @change="onChange" title-active-color="#333333" title-inactive-color="#999999" nav-class="nav-class" custom-class="custom-class">
                <van-tab title="精品服务">
                    <!-- <showtime bind:gettime="onClickTime_server"></showtime> -->
                    <view>
                        <van-swipe-cell
                            class="shopmanager-jp-serve-item-wrap"
                            :right-width="150"
                            v-if="oldserviceList.length > 0"
                            async-close
                            @close="beforeClose($event, { item })"
                            :data-item="item"
                            v-for="(item, index) in oldserviceList"
                            :key="index"
                        >
                            <view :data-id="item.id">
                                <view class="shopmanager-jp-info-wrap shopmanager-single-text-wrap">
                                    <view class="shopmanager-jp-info-icon" :data-item="item.path" @tap="previewImg">
                                        <image mode="aspectFill" :src="item.path" />
                                    </view>
                                    <view class="shopmanager-jp-info-text-wrap">
                                        <view class="shopmanager-jp-info-text-servername">{{ item.serviceName }}</view>
                                        <view class="shopmanager-jp-info-text-title" v-if="item.nexus == 0">网约美发师</view>
                                        <view class="shopmanager-jp-info-text-title" v-if="item.nexus == 1">门店专属美发师</view>
                                        <view class="shopmanager-jp-info-text-title" v-if="item.nexus == null">暂无美发师</view>
                                        <view>
                                            <text class="shopmanager-jp-info-text-discount">¥{{ item.newPrice }}</text>
                                            <text class="shopmanager-jp-info-text-price" v-if="item.oldPrice">¥{{ item.oldPrice }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>

                            <view slot="right" class="right">
                                <view class="shopmanager-jp-btn shopmanager-jp-modify-btn" :data-item="item" @tap.stop.prevent="onedit">修改</view>
                                <view class="shopmanager-jp-btn shopmanager-jp-down-btn" v-if="item.status == 0">下架</view>
                                <view class="shopmanager-jp-btn shopmanager-jp-down-btn" v-if="item.status == 1">上架</view>
                            </view>
                        </van-swipe-cell>
                        <view class="w-100" v-if="oldserviceList.length == 0">
                            <van-empty description="暂未添加精品服务" />
                        </view>
                    </view>
                    <view class="addbtn" @tap.stop.prevent="onAdd">添加精品服务</view>
                </van-tab>
                <van-tab title="美发师">
                    <showtime @gettime="onClickTime"></showtime>
                    <view
                        v-if="storeStylist.length > 0 && item.week == week"
                        class="hairstylist"
                        @tap="onDetails"
                        :data-item="item"
                        v-for="(item, index) in storeStylist"
                        :key="index"
                    >
                        <view class="lastleft">
                            <view>
                                <image mode="aspectFill" class="headerimg" :src="item.headportrait"></image>
                            </view>
                            <view>
                                <view class="names centers">
                                    <text>{{ item.nickname }}</text>
                                    <text class="job3">{{ item.position }}</text>
                                </view>
                                <view class="score centers mt-20">
                                    <image class="clip" :src="imgUrl + 'clip2.png'"></image>
                                    <text>{{ item.score }}</text>
                                    <view>| 总接单{{ item.orderNumber }}</view>
                                </view>
                                <view class="production centers mt-20" :data-item="item" @tap.stop.prevent="toHairstylistproduction">
                                    <text>查看作品{{ item.worksSum ? item.worksSum : '0' }}个</text>
                                    <image class="icon-28" :src="imgUrl + 'right2.png'"></image>
                                </view>
                                <view class="ze centers" v-if="item.zecouponDTOs[0]">
                                    <image class="icon-28" :src="imgUrl + 'ze.png'"></image>
                                    <text>{{ item.zecouponDTOs[0].deduction }}折起</text>
                                </view>
                                <view class="ze mt-20 centers" v-if="item.jiancouponDTOs[0] && !item.zecouponDTOs[0]">
                                    <image class="icon-28" :src="imgUrl + 'jian.png'"></image>
                                    <text>满{{ item.jiancouponDTOs[0].amount }}减{{ item.jiancouponDTOs[0].deduction }}</text>
                                </view>
                                <!-- <view >
                <text>总接单999</text>
              </view> -->
                                <!-- <view class="job2">
                <text>沙宣美发沙龙认证美发师</text>
              </view> -->
                            </view>
                        </view>

                        <view class="lastright">
                            <view class="centers">
                                <text>{{ item.money ? '¥' + item.money : '' }}</text>
                                <text class="qi" v-if="item.money">起</text>
                            </view>
                            <view class="map centers">
                                <text v-if="item.distance < 1000">{{ item.distance ? item.distance : 0 }}m</text>
                                <text v-if="item.distance >= 1000">{{ item.newdistance }}km</text>
                                <van-icon name="location-o" />
                            </view>
                            <!-- <view catchtap="onHairMake" data-item="{{item}}">
              <text>预约</text>
            </view> -->
                        </view>
                    </view>
                    <view class="w-100" v-if="storeStylist.length == 0">
                        <van-empty description="暂无服务美发师" />
                    </view>
                </van-tab>
                <van-tab title="评价">
                    <view class="evaluatebox">
                        <view class="evaluate">
                            <view>综合评分</view>
                            <view class="centers evaluatelistbox">
                                <view class="mr-5" v-for="(item, index) in evaluation" :key="index">
                                    <image v-if="index + 1 <= score" class="evaluateimg" :src="imgUrl + 'clip2.png'"></image>

                                    <image v-if="index + 1 > score" class="evaluateimg" :src="imgUrl + 'clip1.png'"></image>
                                </view>
                                <view class="evatext">{{ score }}</view>
                            </view>
                        </view>
                        <view class="usercomment mt-20" v-if="storeCommentList.length > 0" v-for="(item, index) in storeCommentList" :key="index">
                            <view class="flexbox usertile">
                                <view class="flexbox">
                                    <view>
                                        <image class="headerimg1 mr-30" mode="aspectFill" :src="item.headImg"></image>
                                    </view>

                                    <view class="textfelx">
                                        <view class="usertext1">{{ item.nickname }}</view>
                                        <view class="usertext3 mtb-10">美发师：{{ item.stylistName }}</view>
                                        <view class="usertext2">服务项目：{{ item.serviceName }}</view>
                                    </view>
                                </view>
                                <view class="evaluate1">
                                    <view class="centers fl-r">
                                        <image class="evaluateimg mr-10" :src="item.level < 5 ? imgUrl + 'clip1.png' : imgUrl + 'clip2.png'"></image>
                                        <text class="evatext1">{{ item.level }}</text>
                                    </view>
                                    <view class="evatime mt-60">{{ item.createtime }}</view>
                                </view>
                            </view>

                            <view class="usereva">
                                <view :class="item.showtext ? 'userevatext1' : 'userevatext'">点评：{{ item.comment ? item.comment : '暂无评价' }}</view>
                                <view class="mt-20" v-if="item.bool">
                                    <text v-if="!item.showtext" :data-id="item.id" class="more" @tap="toMore">全文</text>
                                    <text v-if="item.showtext" :data-id="item.id" class="more" @tap="toMore">收起</text>
                                </view>
                            </view>

                            <view class="imglistflexbox">
                                <view class="mt-10 mr-10" :data-item="item" :data-paths="item.imgPaths" @tap="previewImg" v-for="(item, index1) in item.imgPaths" :key="item.id">
                                    <image class="img-200" mode="aspectFill" :src="item"></image>
                                </view>
                            </view>

                            <view class="comment" v-if="item.stylistReply">
                                <text class="coment-menu">美发师：</text>
                                <text class="coment-content">{{ item.stylistReply }}</text>
                            </view>

                            <view class="comment" v-if="item.reply">
                                <text class="coment-menu">门店：</text>
                                <text class="coment-content">{{ item.reply }}</text>
                            </view>
                        </view>
                        <view class="w-100" v-if="storeCommentList.length == 0">
                            <van-empty description="暂无数据" />
                        </view>
                    </view>
                </van-tab>
                <van-tab title="助理\\耗材">
                    <view class="card-container">
                        <view class="card-panel1">
                            <text class="title">收费项</text>
                            <text class="title">价格</text>
                        </view>
                        <scroll-view :scroll-y="true" style="height: 650rpx" @scrolltolower="more">
                            <view class="card-panel" v-for="(item, index) in datalist" :key="index">
                                <text class="content">{{ item.consumablesName }}</text>

                                <view class="content">
                                    <text>￥{{ item.amount }}</text>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                    <view class="addbtn" @tap="updateMarket">修改助理/耗材</view>
                </van-tab>
            </van-tabs>
        </view>

        <van-popup :show="show" position="bottom" @close="onClose">
            <van-area :area-list="areaList" :columns-num="2" title="选择城市" @cancel="onClose" @confirm="onFirm" />
        </van-popup>

        <van-overlay :show="showoverlay" @click="onClickHide" z-index="99">
            <view class="overlaybox" @tap.stop.prevent="shopFun">
                <view class="overlaytext1">联系门店</view>
                <view class="overlaytext2">服务时间：{{ shoplist.storeSetting.starttime }}-{{ shoplist.storeSetting.endtime }}</view>
                <view class="overlaybox1" @tap.stop.prevent="goMobile">
                    {{ shoplist.newtelPhone }}
                </view>
            </view>
            <view class="overlaybox2" @tap.stop.prevent="onClickHide">取消</view>
        </van-overlay>
    </view>
</template>

<script>
// pages/shopdetails/index.js
const area = require('../../utils/area');

const app = getApp(); // 引入app

import _request from '../../utils/request.js';
import { getSevenDay, getToDay, regMobile } from '../../utils/util.js';
import showtime from "../../component/showtime/index"
export default {
	components:{
		showtime
	},
    data() {
        return {
            marginBottom: app.globalData.marginBottom,
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            shopimgUrl: app.globalData.shopimgUrl,

            show: false,
            areaList: '',
            background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
            indicatorDots: true,
            vertical: false,
            autoplay: true,
            interval: 2000,
            duration: 500,
            active: 0,

            showlist: [
                {
                    title: '洗吹',
                    meney: '99'
                },
                {
                    title: '洗吹',
                    meney: '99'
                },
                {
                    title: '洗吹',
                    meney: '99'
                },
                {
                    title: '洗吹',
                    meney: '99'
                },
                {
                    title: '洗吹',
                    meney: '99'
                }
            ],

            evaluatelist: [1, 1, 1, 1, 0.5],
            showLength: 2,
            showtext: true,

            imglist: [
                {
                    id: 1,
                    imgurl: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                },
                {
                    id: 2,
                    imgurl: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                },
                {
                    id: 3,
                    imgurl: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                },
                {
                    id: 4,
                    imgurl: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                },
                {
                    id: 5,
                    imgurl: 'https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/header.png'
                }
            ],

            shoplist: null,
            shopltlist: null,
            serverlist: [],
            oldserviceList: [],
            storeStylist: [],
            storeStyobj: null,
            storeCommentList: [],
            evaluation: null,
            score: 0,
            bool: 0,
            page: 1,
            indexs: '',
            shop: '',
            showoverlay: false,
            today: '',
            touchx: '',
            touchy: '',
            week: getSevenDay()[0].num,
            datalist: [],
            flag: 0,
            serviceList: [],
            starttime: '',
            endtime: '',
            station: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData({
            areaList: area.areaList
        }); // 获取门店七天得理发师列表

        this.storeStylistInfos(); // 进入页面开始轮播

        this.setData({
            autoplay: true
        });
        /**
         * 获取助理与耗材
         */

        _request
            .get('/Consumables/getStoreConsumables', {
                storeId: uni.getStorageSync('storeId')
            })
            .then((res) => {
                // console.log(res)
                if (res.data.code === 200) {
                    this.setData({
                        datalist: res.data.data || []
                    });
                }
            }); // 门店顾客评价

        _request
            .get('/storeManage/getStoreScore', {
                storeId: uni.getStorageSync('storeId'),
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                let sum = res.data.data.score;
                let list = [];

                for (let index = 0; index < res.data.data.score; index++) {
                    --sum;
                    list.push(sum);
                }

                this.setData({
                    evaluation: list,
                    score: res.data.data.score
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            }); // 门店美发师和评论数统计

        _request
            .get('/storeManage/storeStylistAndCommentCount', {
                storeId: uni.getStorageSync('storeId'),
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {})
            .catch((error) => {
                console.log(error, 'error');
            }); // 门店美发师列表
        // this.getstoreStylist(false)
        // 门店评论列表

        this.getstylistComment(1, false);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取精品服务列表
        this.getQualityService(); // 门店服务项目

        _request
            .get('/storeManage/getStoreServerScope', {
                storeId: uni.getStorageSync('storeId'),
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    serverlist: res.data.data.catergoryNames.toString().replace(/,/g, ' | ')
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            }); // 门店详情

        _request
            .postObj('/storeManage/getStoreInfo', {
                storeId: uni.getStorageSync('storeId'),
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                res.data.data.newtelPhone = regMobile(res.data.data.mobile);
                res.data.data.storeSetting.starttime = res.data.data.storeSetting.starttime.substring(0, 5);
                res.data.data.storeSetting.endtime = res.data.data.storeSetting.endtime.substring(0, 5);
                this.setData({
                    shoplist: res.data.data
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            }); // 门店位置等信息

        _request
            .postObj('/storeManage/getStoreInfo', {
                lat: uni.getStorageSync('location').latitude,
                lng: uni.getStorageSync('location').longitude,
                storeId: uni.getStorageSync('storeId'),
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                let distance = (parseInt(res.data.data.distance) / 1000).toFixed(2) * 1000;
                let newdistance = (Math.round(distance * 10) / 10000).toFixed(1);
                this.setData({
                    shopltlist: { ...res.data.data, newdistance },
                    bool: res.data.data.isCollection
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
        // 离开页面停止轮播
        this.setData({
            autoplay: false
        });
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.stopPullDownRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        // 门店评论列表
        if (this.active == 2) {
            this.setData({
                page: this.page + 1
            });
            this.getstylistComment(this.page, true);
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 去添加精品服务
        onAdd() {
            uni.navigateTo({
                url: '/pages/shopmanager/addqualityservice/index'
            });
        },

        // 获取精品服务列表
        getQualityService() {
            _request
                .get('/store/getQualityService', {
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    // status1平台，0店内
                    if (res.data.code === 200) {
                        if (res.data.data) {
                            this.setData({
                                oldserviceList: res.data.data.map((item) => {
                                    item.flag = 0;
                                    return item;
                                }),
                                serviceList: res.data.data.filter((item) => {
                                    if (this.week == item.week) {
                                        item.flag = 0;
                                        return item;
                                    }
                                })
                            });
                        } else {
                            this.setData({
                                oldserviceList: []
                            });
                        }
                    }
                });
        },

        //点击图片进行预览，长按保存分享图片
        previewImg(e) {
            uni.previewImage({
                current: e.currentTarget.dataset.item,
                // 当前显示图片的http链接
                urls: [e.currentTarget.dataset.item] // 需要预览的图片http链接列表
            });
        },

        //点击轮播图片进行预览，长按保存分享图片
        previewstoreImg(e) {
            uni.previewImage({
                current: e.currentTarget.dataset.item,
                // 当前显示图片的http链接
                urls: this.shopltlist.storePhotos // 需要预览的图片http链接列表
            });
        },

        // 获取服务
        onClickTime_server(e) {
            const { orderWeek, Key, num } = e.detail;
            this.setData({
                serviceList: this.oldserviceList.filter((item) => {
                    if (num == item.week) {
                        return item;
                    }
                })
            });
        },

        // 获取点击时间
        onClickTime(e) {
            const { orderWeek, Key, num } = e.detail;
            const { storeStyobj } = this;
            this.setData({
                storeStylist: [],
                week: num
            });
            let list = [];

            if (storeStyobj[Key]) {
                list = storeStyobj[Key].map((item) => {
                    let distance = (parseInt(item.distance) / 1000).toFixed(2) * 1000;
                    let newdistance = (Math.round(distance * 10) / 10000).toFixed(1);
                    item.zecouponDTOs = item.couponDTOs.filter((item) => {
                        if (item.type == 2) {
                            return item;
                        }
                    });
                    item.jiancouponDTOs = item.couponDTOs.filter((item) => {
                        if (item.type == 1) {
                            return item;
                        }
                    });

                    if (item.lable) {
                        let money = item.lowestServicePrice.toFixed(2);
                        let moneys = item.lable.match(/\d+(.\d+)?/g).join('');
                        let meal = item.lable.split(moneys)[0];
                        return { ...item, money, meal, newdistance };
                    } else {
                        return { ...item, newdistance };
                    }
                });
            }

            this.setData({
                storeStylist: list,
                today: orderWeek
            });
        },

        // jpactive: function() {
        //   this.setData({
        //     flag: 0 ? 1: 0
        //   })
        // },
        touchStart(e) {
            var that = this;
            that.setData({
                touchx: e.changedTouches[0].clientX,
                touchy: e.changedTouches[0].clientY
            }); // console.log(that.data.touchx)
            // console.log(that.data.touchy)
        },

        touchEnd(e) {
            var that = this;
            let x = e.changedTouches[0].clientX;
            let y = e.changedTouches[0].clientY;
            let turn = '';

            if (x - that.touchx > 50 && Math.abs(y - that.touchy) < 50) {
                //右滑
                turn = 'right';
            } else if (x - that.touchx < -50 && Math.abs(y - that.touchy) < 50) {
                //左滑
                turn = 'left'; // console.log(that.data.touchy)
            }

            if (y - that.touchy > 50 && Math.abs(x - that.touchx) < 50) {
                //下滑
                turn = 'down';
            } else if (y - that.touchy < -50 && Math.abs(x - that.touchx) < 50) {
                //上滑
                turn = 'up';
            }

            let list = this.serviceList;
            const id = e.currentTarget.dataset.id;
            list.forEach((ele) => {
                if (ele.id == id) {
                    if (turn == 'left') {
                        ele.flag = 1;
                    } else {
                        ele.flag = 0;
                    }
                }
            });
            this.setData({
                serviceList: list
            }); // //根据方向进行操作
            // if(turn == 'left'){
            //   that.setData({
            //     flag: 1
            //   })
            // }
            // if(turn == 'right'){
            //   that.setData({
            //     flag: 0
            //   })
            // }
        },

        //下架
        goodsdown: function (e) {
            const { id, status } = e.currentTarget.dataset.item;
            let that = this;
            uni.showModal({
                title: '',
                content: status ? '是否要上架该商品' : '是否要下架该商品',
                confirmText: '确认',
                cancelText: '取消',

                success(res) {
                    if (res.confirm) {
                        _request
                            .postObj('/store/qualityServiceOut', {
                                storeId: uni.getStorageSync('storeId'),
                                id
                            })
                            .then((res) => {
                                if (res.data.code === 200 && !status) {
                                    // 获取精品服务列表
                                    uni.showToast({
                                        title: '下架成功',
                                        icon: 'none',
                                        duration: 2000
                                    });
                                    that.getQualityService();
                                } else if (res.data.code === 200 && status) {
                                    // 获取精品服务列表
                                    that.getQualityService();
                                    uni.showToast({
                                        title: '上架成功',
                                        icon: 'none',
                                        duration: 2000
                                    });
                                }
                            });
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },

        beforeClose(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            const { position, instance } = e.detail;

            switch (position) {
                case 'left':
                case 'cell':
                    instance.close();
                    break;

                case 'right':
                    const { id, status } = e.currentTarget.dataset.item;
                    let vm = this;
                    uni.showModal({
                        title: '',
                        content: status ? '是否要上架该商品' : '是否要下架该商品',
                        confirmText: '确认',
                        cancelText: '取消',

                        success(res) {
                            if (res.confirm) {
                                _request
                                    .postObj('/store/qualityServiceOut', {
                                        storeId: uni.getStorageSync('storeId'),
                                        id
                                    })
                                    .then((res) => {
                                        if (res.data.code === 200 && !status) {
                                            // 获取精品服务列表
                                            uni.showToast({
                                                title: '下架成功',
                                                icon: 'none',
                                                duration: 2000
                                            });
                                            vm.getQualityService();
                                            instance.close();
                                        } else if (res.data.code === 200 && status) {
                                            // 获取精品服务列表
                                            vm.getQualityService();
                                            uni.showToast({
                                                title: '上架成功',
                                                icon: 'none',
                                                duration: 2000
                                            });
                                        }
                                    });
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                    break;
            }
        },

        // 修改
        onedit(e) {
            const { item } = e.currentTarget.dataset;
            let obj = JSON.stringify(item);
            uni.navigateTo({
                url: '/pages/shopmanager/addqualityservice/index?data=' + obj
            });
        },

        // 资讯
        // 显示电话
        onMobile(e) {
            this.setData({
                showoverlay: true
            });
        },

        // 拨打电话
        goMobile() {
            uni.makePhoneCall({
                phoneNumber: this.shoplist.mobile //仅为示例，并非真实的电话号码
            });
        },

        // 隐藏电话
        onClickHide() {
            this.setData({
                showoverlay: false
            });
        },

        // 门店美发师列表
        getstoreStylist(show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .postObj('/store/storeStylists', {
                    storeId: uni.getStorageSync('storeId'),
                    size: 10,
                    page: 1,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    this.setData({
                        storeStylist: res.data.data.map((item) => {
                            let distance = (parseInt(item.distance) / 1000).toFixed(2) * 1000;
                            let newdistance = (Math.round(distance * 10) / 10000).toFixed(1);

                            if (item.lable) {
                                let money = item.lowestServicePrice.toFixed(2);
                                let moneys = item.lable.match(/\d+(.\d+)?/g).join('');
                                let meal = item.lable.split(moneys)[0];
                                return { ...item, money, meal, newdistance };
                            } else {
                                return { ...item, newdistance };
                            }
                        })
                    });

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }

                    console.log(error, 'error');
                });
        },

        // 门店评论列表
        getstylistComment(e, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .get('/storeComment/getStoreCommentList', {
                    storeId: uni.getStorageSync('storeId'),
                    page: e
                })
                .then((res) => {
                    let list = [];

                    if (res.data.data && res.data.data != null) {
                        list = res.data.data.map((item) => {
                            if (item.comment.length >= 60) {
                                item.bool = true;
                            } else {
                                item.bool = false;
                            }

                            item.comment = decodeURIComponent(item.comment);
                            item.stylistReply = decodeURIComponent(item.stylistReply);
                            item.reply = decodeURIComponent(item.reply);
                            return item;
                        });
                        this.setData({
                            storeCommentList: e > 1 ? [...this.storeCommentList, ...list] : list
                        });
                    }

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }

                    console.log(error, 'error');
                });
        },

        // 获取tab下标
        onChange(event) {
            this.setData({
                active: event.detail.name
            });
        },

        // 美发师详情
        onDetails(e) {
            const { item } = e.currentTarget.dataset;
            item.active = 0;
            let obj = JSON.stringify(item);
            uni.navigateTo({
                url: '/pages/hairstylistdetails/index?hair=' + encodeURIComponent(obj)
            });
        },

        // 前往美发师作品
        toHairstylistproduction(e) {
            const { item } = e.currentTarget.dataset;
            item.active = 1;
            let obj = JSON.stringify(item);
            uni.navigateTo({
                url: '/pages/hairstylistdetails/index?hair=' + encodeURIComponent(obj)
            });
        },

        // 预约
        onHairMake(e) {
            const { item } = e.currentTarget.dataset;
            let vm = this;

            if (item.week != this.week) {
                uni.showModal({
                    title: '当前是跨店预约,美发师有可能拒接哦!',

                    success(res) {
                        if (res.confirm) {
                            item.days = getToDay(vm.week).orderWeek;
                            let hair = JSON.stringify(item);
                            let shop = JSON.stringify(this.shop);
                            uni.navigateTo({
                                url: '/pages/bookingorder/index?hair=' + encodeURIComponent(hair) + '&shop=' + encodeURIComponent(shop)
                            });
                        } else if (res.cancel) {
                        }
                    }
                });
            } else {
                item.days = getToDay(vm.week).orderWeek;
                let hair = JSON.stringify(item);
                let shop = JSON.stringify(this.shop);
                uni.navigateTo({
                    url: '/pages/bookingorder/index?hair=' + encodeURIComponent(hair) + '&shop=' + encodeURIComponent(shop)
                });
            }
        },

        // 查看更多
        toMore(e) {
            const { id } = e.currentTarget.dataset;
            this.setData({
                storeCommentList: this.storeCommentList.map((item) => {
                    if (item.id == id) {
                        item.showtext = !item.showtext;
                    }

                    return item;
                })
            });
        },

        // 展示更多
        showmore() {
            this.setData({
                showLength: this.showlist.length
            });
        },

        // 点击时间高亮
        onitemactive(e) {
            const { index } = e.currentTarget.dataset;
        },

        // 展示3条
        showmuch() {
            this.setData({
                showLength: 2
            });
        },

        // 展示选择城市
        showmolde() {
            this.setData({
                show: true
            });
        },

        // 完成选择城市，发送请求
        onFirm(e) {
            this.setData({
                show: false
            });
        },

        // 展示选择城市
        showPopup() {
            this.setData({
                show: true
            });
        },

        // 关闭选择城市
        onClose() {
            this.setData({
                show: false
            });
        },

        // 轮播
        changeIndicatorDots() {
            this.setData({
                indicatorDots: !this.indicatorDots
            });
        },

        changeAutoplay() {
            this.setData({
                autoplay: !this.autoplay
            });
        },

        intervalChange(e) {
            this.setData({
                interval: e.detail.value
            });
        },

        durationChange(e) {
            this.setData({
                duration: e.detail.value
            });
        },

        getQRCode() {
            uni.scanCode({
                //扫描API
                success: function (res) {
                    var qId = res.result;

                    if (qId.indexOf('car?id=') != -1) {
                        var ids = qId.split('=');
                        uni.navigateTo({
                            url: '/mainpages/car/index?id=' + ids[1]
                        });
                    } else if (qId.indexOf('textcard?id=') != -1) {
                    } else {
                        uni.navigateTo({
                            url: '/pages2/qcCodeList/index?qId=' + qId
                        });
                    }
                },
                fail: function (error) {
                    console.log(error); //输出回调信息
                }
            });
        },

        // 点击收藏
        onCollection(e) {
            const { storeid } = e.currentTarget.dataset;

            _request
                .postObj('/storeManage/updateCollectionType', {
                    userId: uni.getStorageSync('userid'),
                    storeId: storeid,
                    isCollection: this.bool
                })
                .then((res) => {
                    this.setData({
                        bool: this.bool == 1 ? 0 : 1
                    });
                    uni.showToast({
                        title: res.data.message,
                        icon: 'none',
                        duration: 2000
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 修改助理、耗材
        updateMarket() {
            uni.navigateTo({
                url: '/pages/market/index'
            });
        },

        // 获取门店七天得理发师列表
        storeStylistInfos() {
            _request
                .postObj('/storeStylist/storeStylistInfos', {
                    size: 10,
                    page: 1,
                    storeId: uni.getStorageSync('storeId'),
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    // 获取当天理发师
                    let data = res.data.data;
                    let today = getSevenDay()[0].Key;
                    let list = data[today] ? data[today] : [];
                    this.setData({
                        today,
                        storeStyobj: res.data.data,
                        storeStylist: list.map((item) => {
                            let distance = (parseInt(item.distance) / 1000).toFixed(2) * 1000;
                            let newdistance = (Math.round(distance * 10) / 10000).toFixed(1);
                            item.zecouponDTOs = item.couponDTOs.filter((item) => {
                                if (item.type == 2) {
                                    return item;
                                }
                            });
                            item.jiancouponDTOs = item.couponDTOs.filter((item) => {
                                if (item.type == 1) {
                                    return item;
                                }
                            });

                            if (item.lable) {
                                let money = item.lowestServicePrice.toFixed(2);
                                let moneys = item.lable.match(/\d+(.\d+)?/g).join('');
                                let meal = item.lable.split(moneys)[0];
                                return { ...item, money, meal, newdistance };
                            } else {
                                return { ...item, newdistance };
                            }
                        })
                    });
                })
                .catch((error) => {});
        },

        edit: function () {
            uni.navigateTo({
                url: '/pages/myprofile/index?from=shopmanager'
            });
        },

        swiperChange() {
            console.log('占位：函数 swiperChange 未声明');
        },

        more() {
            console.log('占位：函数 more 未声明');
        },

        shopFun() {
            console.log('占位：函数 shop 未声明');
        }
    }
};
</script>
<style>
/* pages/shopdetails/index.wxss */
page {
    height: 100%;
    width: 100%;
    background: #fbfbfb;
    overflow-y: auto;
}

.m-40 {
    margin: 0 20rpx;
}

.pd-100 {
    padding: 0 100rpx;
}
.shopicon {
    width: 32rpx;
    height: 32rpx;
}

.shopicon2 {
    width: 24rpx;
    height: 24rpx;
}

.shopicon1 {
    width: 52rpx;
    height: 52rpx;
}

/* 头部 */
.header {
    height: 60rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 46rpx 0 42rpx;
    position: absolute;
    z-index: 1;
}

.location,
.wxcode van-icon {
    color: white;
}

.location {
    height: 60rpx;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    line-height: 60rpx;
}

.location > text {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    margin-left: 10rpx;
}

.search {
    width: 456rpx;
    height: 60rpx;
    background: #ffffff;
    border-radius: 22px;
    display: flex;
    margin: 0 20rpx;
}

.seaicon {
    margin: 0 20rpx;
}

.weui-input {
    width: 312rpx;
    height: 60rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    line-height: 60rpx;
}

.img {
    height: 60rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 46rpx 0 42rpx;
    position: absolute;
    z-index: 1;
    top: 10rpx;
}

.wxcode {
    width: 36rpx;
    height: 36rox;
}

/* 轮播 */
.swiper {
    height: 454rpx;
}

.swiper .wx-swiper-dot {
    width: 30rpx;
    height: 10rpx;
    border-radius: 3px;
    margin-bottom: 196rpx;
}

.swiper .wx-swiper-dot::before {
    content: '';
    flex-grow: 1;
    border-radius: 8rpx;
}

.swiper .wx-swiper-dot-active::before {
    background: #ff8722;
}

.swiperimg {
    width: 100%;
}

/* 店面详情 */
.shopdetails {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 5px;
    position: relative;
    top: -176rpx;
    padding: 30rpx 20rpx 30rpx 30rpx;
    box-sizing: border-box;
}

.flexbox {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 15rpx;
}

.shoptitle {
    justify-content: space-between;
    margin-bottom: 20rpx;
}

.shoptitletext1 {
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    max-width: 400rpx;
}

.shoptitletext2 {
    height: 32rpx;
    /* background: #FFE4CE; */
    border-radius: 5px 0px 5px 0px;
    font-size: 20rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 32rpx;
    margin-left: 10rpx;
    padding: 0 10rpx;
    width: 150rpx;
}

.shoptitletext3 {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    display: flex;
    align-items: center;
}

.mr-10 {
    margin-right: 10rpx;
}

.text1 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
}

.text2 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    color: #999999;
    line-height: 40rpx;
}

.text3 {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    color: #999999;
    line-height: 40rpx;
    width: 350rpx;
}
.shopmanager-text3 {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    color: #999999;
    line-height: 40rpx;
    width: 450rpx;
    white-space: wrap;
    word-wrap: break-word;
}

.text4 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
    position: absolute;
    right: 20rpx;
}

.server {
    width: 100%;
}
.locationbox {
    width: 100%;
    /* height: 80rpx; */
}

.iconfelx {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
}

/* 美发师 */
.hairstylist {
    width: 710rpx;
    height: 260rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    position: relative;
    box-sizing: border-box;
    padding: 30rpx 20rpx;
    top: 0;
    margin: 0 auto;
    margin-top: 20rpx;
}

.lastleft {
    height: 100%;
    width: 454rpx;
    display: flex;
    flex-wrap: nowrap;
    margin-right: 56rpx;
}

.lastbox .lastleft > view:nth-child(1) {
    margin: 20rpx 30rpx 0rpx 0rpx;
}

.lastbox .lastleft > view:nth-child(2) {
    margin: 20rpx 0 20rpx 0;
}

.score > text {
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
    margin: 0 10rpx 0 6rpx;
}

.score > view {
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
}

.fl-r {
    float: right;
}

.hairstylist .lastleft > view:nth-child(1) {
    margin: 0rpx 30rpx 0rpx 0rpx;
}

.hairstylist .lastleft > view:nth-child(2) {
    margin: 0rpx 0 20rpx 0;
}

.hairstylist .lastright > view:nth-child(3) {
    width: 120rpx;
    height: 52rpx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 24rpx;
    text-align: center;
    color: white;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 52rpx;
    text-align: center;
    padding: 0;
    margin-top: 54rpx;
    margin-right: 0rpx;
    float: right;
}

.hairstylist .lastright > view:nth-child(1) {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff1b0b;
    line-height: 44rpx;
    /* margin-top: 10rpx; */
    text-align: left;
}

.hairstylist .lastright > view:nth-child(2) {
    height: 28rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #999999;
    line-height: 28rpx;
    text-align: right;
    float: right;
    margin-top: 20rpx;
}

.qi {
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    margin-left: 10rpx;
}

.production > text {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.ze {
    position: absolute;
    margin-top: 14rpx;
}

.ze > text {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    line-height: 34rpx;
    margin-left: 10rpx;
}

.map > text {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #999999;
    line-height: 34rpx;
    margin-right: 10rpx;
}

.job1,
.job2 {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    width: 264rpx;
    height: 34rpx;
    line-height: 34rpx;
}

.job3 {
    padding: 0 10rpx;
    height: 32rpx;
    line-height: 32rpx;
    background: #ff8722;
    border-radius: 0px 4px 4px 4px;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    margin-left: 10rpx;
    text-align: center;
}

.names > text:nth-child(1) {
    max-width: 170rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.headerimg {
    width: 160rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
}

.clip {
    width: 24rpx;
    height: 22rpx;
}

.close {
    width: 32rpx;
    height: 32rpx;
}

.swiperimg {
    width: 100%;
}

.lastright {
    height: 100%;
    width: min-content;
}

/* 评价 */
.evaluate {
    margin: 0 auto;
    width: 710rpx;
    height: 80rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 20rpx;
    box-sizing: border-box;
}

.evaluateimg {
    width: 28rpx;
    height: 28rpx;
}

.evaluatelistbox > view {
    display: flex;
}

.mr-5 {
    margin-right: 5rpx;
}

.evatext {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
}

.headerimg1 {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
}

.usercomment {
    margin: 0 auto;
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 6px;
    padding: 30rpx 20rpx 20rpx 20rpx;
    box-sizing: border-box;
}

.usertile {
    height: 120rpx;
    justify-content: space-between;
}

.usertext1 {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.usertext2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    line-height: 34rpx;
}

.usertext3 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
}

.evatime {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
}

.evatext1 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ff8722;
    line-height: 40rpx;
}

.evaluate1 {
    height: 120rpx;
    text-align: right;
    width: 150rpx;
}

.usereva {
    margin-top: 50rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    line-height: 40rpx;
}

.userevatext1 {
    height: 100%;
}

.userevatext {
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.more {
    height: 120rpx;
    height: 34rpx;
    font-size: 12px;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
}

.img-200 {
    height: 200rpx;
    width: 200rpx;
}

.imglistflexbox {
    display: flex;
    flex-wrap: wrap;
}

.van-tab {
    height: 100%;
}

/* 组件样式 */

.van-tabs__nav,
.custom-class,
.van-tabs__scroll--line {
    background: #fbfbfb !important;
}

.van-tab--active {
    font-size: 32rpx !important;
}

.nav-class {
    width: 700rpx;
}

.van-tabs__line {
    background: #ff8722 !important;
}

.van-tab {
    height: 100%;
}

.show {
    display: block;
}

.hidden {
    display: none;
}

van-tabs {
    width: -webkit-fill-available !important;
}

/* 时间 */
.datebox {
    width: 710rpx;
    border-bottom: 1px solid #d2d2d2;
    display: flex;
    overflow-x: auto;
    margin: 0 10rpx;
}

.date {
    width: 110rpx;
    height: 74rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    margin-right: 40rpx;
    display: inline-table;
    padding: 10rpx 0;
}

.activetext {
    color: #ff8722;
}

/* 精品服务 */
.qualityservice {
    width: 710rpx;
    height: 200rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    display: flex;
}

.qualityimg {
    width: 160rpx;
    height: 160rpx;
}

.quality-meal {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.quality-hair {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.quality-price1 {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff1b0b;
    line-height: 44rpx;
}

.quality-price2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    text-decoration: line-through;
}

.quality-btn {
    width: 120rpx;
    height: 48rpx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 24rpx;
    text-align: center;
    color: white;
    font-size: 28rpx;
    line-height: 48rpx;
    position: absolute;
    right: 20rpx;
    bottom: 14rpx;
}

.box {
    position: relative;
    top: -174rpx;
}

/* 底部电话弹窗 */

.overlaybox {
    position: absolute;
    bottom: 170rpx;
    margin: 0 20rpx;
    width: 710rpx;
    background-color: white;
    border-radius: 20rpx;
}

.overlaybox1 {
    height: 100rpx;
    border-radius: 80rpx;
    line-height: 100rpx;
    text-align: center;
    color: #007aff;
}

.overlaytext1 {
    text-align: center;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000;
    height: 50rpx;
}

.overlaytext2 {
    text-align: center;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000;
    height: 50rpx;
}

.overlaybox2 {
    width: 710rpx;
    height: 100rpx;
    background-color: white;
    line-height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    margin: 0 20rpx;
    margin-top: 30rpx;
    border-radius: 80rpx;
    color: #007aff;
    position: absolute;
    bottom: 50rpx;
}

/* 助材 */
.card-container {
    display: flex;
    flex-direction: column;
    /* box-shadow: 0px 2px 4px 2px #ddd; */
    border-width: 0rpx;
    margin: 30rpx;
    border-radius: 10rpx;
    background-color: #fff;
}

.card-panel1 {
    height: 80rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    margin: 10rpx;
    padding: 0 100rpx;
    background-color: #fbefe4;
}

.card-panel {
    height: 80rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    margin: 10rpx;
    padding: 0 100rpx;
}

.card-panel image {
    width: 40rpx;
    height: 40rpx;
    margin: 0 10rpx;
}

.content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    font-size: 32rpx;
    color: #666666;
}

.title {
    font-size: 36rpx;
    font-weight: 540;
    color: #ff8722;
}

.addbtn {
    width: 690rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 30rpx 30rpx 0 30rpx;
    position: fixed;
    bottom: 30rpx;
}

/*精品服务*/
.shopmanager-btn-wrap {
    height: 70rpx;
    background-color: #fff;
    padding: 30rpx 30rpx 0rpx 30rpx;
}
.shopmanager-edit-btn {
    width: 240rpx;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    line-height: 70rpx;
    border: 3rpx solid #ff8722;
    color: #ff8722;
    height: 70rpx;
    border-radius: 70rpx;
    font-weight: 700;
    font-size: 35rpx;
}
.shopmanager-edit-btn image {
    position: relative;
    top: 4rpx;
}
.shopmanager-single-text-wrap {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    background-color: #fff;
}
.shopmanager-add-btn-wrap {
    width: 100%;
    background-color: #fff;
    height: 100rpx;
    position: fixed;
    bottom: 0rpx;
}
.shopmanager-add-server-btn {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    line-height: 90rpx;
    border: 3rpx solid #ff8722;
    color: #ffefe1;
    background-color: #ff8722;
    height: 90rpx;
    border-radius: 90rpx;
    font-weight: 700;
    font-size: 35rpx;
}
/* .shopmanager-jp-serve-item-wrap{
  height: 200rpx;
  width: 700rpx;
  margin: 10rpx auto;
  overflow: hidden;
  transition: transform 3s;
} */
.shopmanager-jp-serve-in-wrap {
    width: 1000rpx;
}
.shopmanager-jp-serve-in-wrap.active {
    transform: translateX(-300rpx);
}
.shopmanager-jp-info-wrap {
    /* width: 700rpx; */
    height: 200rpx;
    /* float: left; */
    margin: 0 0 0 20rpx;
    padding: 20rpx;
}
.shopmanager-jp-btn {
    float: left;
    width: 150rpx;
    height: 200rpx;
    text-align: center;
    line-height: 200rpx;
    color: #ffffff;
    font-size: 40rpx;
}
.right {
    /* width: 300rpx; */
    /* height: 100%; */
    background: #f12b2d;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.shopmanager-jp-modify-btn {
    background-color: #ff8722;
}
.shopmanager-jp-down-btn {
    background-color: #f75755;
}
.shopmanager-jp-info-icon {
    width: 180rpx;
    height: 180rpx;
    /* background-color: #D86860; */
}
.shopmanager-jp-info-icon image {
    width: 90%;
    height: 90%;
}
.shopmanager-jp-info-text-wrap {
    margin-left: 20rpx;
    margin-top: 10rpx;
}
.shopmanager-jp-info-text-servername {
    color: #000;
    font-size: 28rpx;
    font-weight: 700;
}

.shopmanager-jp-info-text-title {
    color: #9a9a9a;
    font-size: 26rpx;
}
.shopmanager-jp-info-text-discount {
    color: #ff1b0b;
    font-size: 26rpx;
    font-weight: 700;
}
.shopmanager-jp-info-text-price {
    color: #979797;
    font-size: 25rpx;
    margin-left: 30rpx;
    text-decoration: line-through;
}
.shopmanager-jp-info-text-wrap view {
    margin-bottom: 15rpx;
}

.comment {
    margin-top: 15rpx;
    padding: 10rpx;
    background-color: #fbfbfb;
}

.coment-menu {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
}
.coment-content {
    font-size: 28rpx;
    color: #999999;
}
</style>
